<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
        }
        span{
            background-color: green;
        }
        /*设置浮动*/
        .left{
            float: left;
        }

        .float-left:after{
            content: '';
            display: block;
            clear: both;
        }

    </style>
</head>
<body>

<div class="">
    <span class="left">大眼包子</span>
    <span class="left">大眼包子</span>
    <span class="left">大眼包子</span>
</div>
<!--    <br/>-->

<div class="parent">
    <span class="child">大眼包子</span>
    <span class="child">大眼包子</span>
    <span class="child">大眼包子</span>
</div>

<hr/>
<!--使用after伪元素清除浮动-->
<div class="float-left">
    <span class="left">大眼包子</span>
    <span class="left">大眼包子</span>
    <span class="left">大眼包子</span>
</div>
<!--    <br/>-->

<div class="parent">
    <span class="child">大眼包子</span>
    <span class="child">大眼包子</span>
    <span class="child">大眼包子</span>
</div>

<hr/>


</body>
</html>